:root{
    --panel: rgba(25,26,36,.88);
    --panel-border: rgba(255,255,255,.10);
    --panel-shadow: 0 28px 60px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.04) inset;
    --radius-lg: 20px;
    --ink: rgba(255,255,255,.88);
    --accent: #D35100;
    --accent-2: #d35100;
    --ink-strong: rgba(255,255,255,.96);
}

.auth-shell{
    min-height: calc(100svh - 64px);
    display: grid;
    place-items: center;
    padding: clamp(16px, 3vw, 32px);
}

.auth-card{
    width: min(92vw, 520px);
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--panel-shadow);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: clamp(22px, 3vw, 30px);
    color: var(--ink);
    position: relative;
}

/* Brand bar */
.auth-card::before{
    content: "";
    position: relative;
    display: block;
    height: 4px;
    border-radius: 9999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    margin-bottom: 1rem;
}

.auth-login-text{
    font-weight: 800;
    letter-spacing: .12em;
    text-align: center;
    color: var(--ink-strong);
    font-size: clamp(22px, 2.8vw, 32px);
    margin: 0 0 1rem 0;
}

.auth-login-button{
    border-radius: 9999px;
    font-weight: 800;
    letter-spacing: .1em;
    padding: .9rem 1rem;
    border: 0;
    color: #fff;
    transition: transform .06s ease, filter .15s ease, box-shadow .15s ease;
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 65%, #cf4c00 100%);
    box-shadow: 0 14px 34px rgba(211,81,0,.30);
}

.auth-login-button:hover{
    filter: brightness(1.06);
    box-shadow: 0 16px 36px rgba(211,81,0,.36);
}